<template>
  <div class="app-container">
    <!-- 表格上面的查询框 -->
    <div class="filter-container">
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        添加
      </el-button>
    </div>

    <el-table :data="list" fit highlight-current-row style="width: 100%;" @sort-change="sortChange">

      <el-table-column class="filter-item" type="expand">
        <!-- 点击表格中数据后的详情 -->
        <template slot-scope="{row}">
          <el-form label-position="left" inline class="demo-table-expand">

            <el-form-item label="订单编号">
              <span>{{ row.orderNo }}</span>
            </el-form-item>

            <el-form-item label="订单金额">
              <span>{{ row.totalMoney }}</span>
            </el-form-item>

            <el-form-item label="创建时间">
              <span>{{ row.createTime }}</span>
            </el-form-item>
            <el-form-item label="修改时间">
              <span>{{ row.updateTime }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <!-- 表格字段 -->
      <el-table-column prop="orderNo" label="订单编号" />

      <el-table-column prop="totalMoney" label="订单金额" />

      <el-table-column prop="createTime" label="创建时间" />

      <el-table-column prop="updateTime" label="修改时间" />

      <el-table-column label="操作" fit>
        <template slot-scope="{row,$index}">
          <el-button size="small" type="primary" @click="handleUpdate(row)">编辑</el-button>
          <el-button v-if="roles[0] == 'news_admin' && row.checkStatus == 0" size="small" type="success" @click="confirmCheck(row)">确认审核</el-button>
          <el-button v-if="roles[0] == 'news_admin' && row.checkStatus != 0" size="small" type="info" @click="confirmCheck(row)">撤回审核</el-button>
          <el-button
            v-if="(row.checkStatus == 1) &&(roles[0] == 'news_admin'||roles[0] == 'news_editor')"
            size="small"
            type="success"
            @click="updateCheckStatus(row)"
          >发布</el-button>
          <el-button
            v-if="(roles[0] == 'news_admin'||roles[0] == 'news_editor')&&(row.checkStatus == 2)"
            size="small"
            type="warning"
            @click="updateCheckStatus(row)"
          >撤销</el-button>
          <el-button v-if="roles[0] == 'super_admin'||roles[0] == 'news_admin'" size="small" type="danger" @click="handleDelete(row,$index)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页组件 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getListByPage"
    />
    <!-- 弹窗组件 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="70px" style="width: 400px; margin-left:50px;">
        <!-- 弹窗 -->
        <el-form-item label="订单编号" prop="orderNo">
          <el-input v-model="temp.orderNo" />
        </el-form-item>

        <el-form-item label="订单金额" prop="totalMoney">
          <el-input v-model="temp.totalMoney" />
        </el-form-item>

        <!-- <el-form-item label="新闻主图" prop="newsImage">
          <el-input v-model="temp.newsImage" />
        </el-form-item> -->

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          确认
        </el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
      <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
        <el-table-column prop="key" label="Channel" />
        <el-table-column prop="pv" label="Pv" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogPvVisible = false">确认</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {
  getToken
} from '@/utils/auth'
  // 导入自己定义的方法
import {
  getAll,
  add,
  deleteById,
  update
} from '@/api/order/orderManager'

// 导入组件  记得声明组件
import Pagination from '@/components/Pagination'

export default {
  components: { // 在这里声明组件
    Pagination
  },
  data() {
    return {
      disabled: false,
      dialogVisible: false,
      headerToken: {
        'Authorization': getToken()
      },
      list: [], // 列表数据
      total: 0,
      createTimeOrderOptions: [{
        label: '创建时间 升序',
        key: '+createTime',
        value: 'createTime asc'
      },
      {
        label: '创建时间 降序',
        key: 'createTime',
        value: 'createTime desc'
      }
      ],

      listQuery: { // 分页 排序  查询参数
        pageNum: 1,
        pageSize: 6
      },
      fieldQuery: { // 按字段查询
        realName: ''
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '创建'
      },
      dialogPvVisible: false,
      pvData: [],
      temp: {
        id: '',
        orderNo: '',
        totalMoney: '',
        isdelete: '',
        createTime: undefined,
        updateTime: undefined
      },
      tempImageList: [

      ],
      newsCategoryList: [

      ],
      rules: {},
      pageParam: {
        pageNum: 1,
        pageSize: 6,
        model: {

        },
        orderParams: [
          'createTime desc'
        ],
        superSearchKeyWord: ''
      },
      roleList: []

    }
  },
  created() {
    this.getListByPage()
  },
  methods: {
    sortChange(val) {
      // console.log("排序参数",val)
      const prop = val.prop
      const order = val.order === 'ascending' ? 'asc' : 'desc'
      const orderParam = prop + ' ' + order
      // console.log(orderParam)
      for (let i = 0; i < this.pageParam.orderParams.length; i++) {
        if (this.pageParam.orderParams[i].indexOf(prop) > -1) {
          this.pageParam.orderParams.splice(i, 1)
        }
      }
      this.pageParam.orderParams.push(orderParam)
      console.log(this.pageParam.orderParams)
      this.getListByPage()
    },
    getListByPage() {
      this.pageParam.pageNum = this.listQuery.pageNum
      this.pageParam.pageSize = this.listQuery.pageSize

      console.log(this.pageParam.orderParams)

      getAll(this.pageParam).then(res => {
        // console.log(res)
        this.list = res.content.list
        this.total = res.content.total
      }).catch(err => {
        console.log(err)
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getListByPage()
    },
    handleCreate() {
      this.disabled = false
      this.tempImageList = []
      // this.$refs.imagesUpload.clearFiles()
      this.resetTemp()
      this.getNewsCategoryList()
      // console.log(this.userName)
      this.temp.createUserNickName = this.storeNickName
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleUpdate(row) {
      console.log('edit:' + row)
      this.disabled = true
      this.temp = Object.assign({}, row) // copy obj
      this.temp.id = row.id
      this.dialogStatus = 'update'
      // this.getTempImageList() // 展示商品图片列表
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleDelete(row, index) {
      deleteById({
        id: row.id
      }).then(() => {
        this.dialogFormVisible = false
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
        this.getListByPage()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          add(this.temp).then(() => {
            this.dialogFormVisible = false
            this.$notify({
              title: 'Success',
              message: 'Created Successfully',
              type: 'success',
              duration: 2000
            })
            this.getListByPage()
          })
        }
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          update(this.temp).then(() => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '编辑成功',
              type: 'success',
              duration: 2000
            })
            this.getListByPage()
          })
        }
      })
    },
    resetTemp() {
      this.temp = {
        id: '',
        title: '',
        createUserId: '',
        createUserNickName: '',
        newsContent: '',
        createTime: undefined,
        updateUserId: '',
        updateTime: undefined,
        viewNum: undefined,
        isDeleted: undefined,
        checkStatus: undefined,
        commentNum: undefined,
        categoryId: ''
      }
    },
    beforeAvatarUpload(file) {
      console.log(file)
      const fileName = file.name
      const isImage = /.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(fileName)
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isImage) {
        this.$message.error('上传头像图片只能是 gif|jpg|jpeg|png|gif|jpg|png 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isImage && isLt2M
    },
    onEditorBlur(quill) {
      // console.log('editor blur!', quill)
    },
    onEditorFocus(quill) {
      // console.log('editor focus!', quill)
    },
    onEditorReady(quill) {
      // console.log('editor ready!', quill)
    },
    onEditorChange({
      quill,
      html,
      text
    }) {
      // console.log('editor change!', quill, html, text)
      this.temp.description = html
    },
    categoryChange() {
      this.getListByPage()
    },
    updateCheckStatus(row) {
      // console.log('edit:' + row)
      const temp = Object.assign({}, row) // copy obj
      temp.checkStatus = temp.checkStatus == 1 ? 2 : 1
      updateNewsinfo(temp).then(() => {
        this.dialogFormVisible = false
        this.$notify({
          title: '成功',
          message: temp.checkStatus == 1 ? '撤销成功' : '发布成功',
          type: 'success',
          duration: 2000
        })
        this.getListByPage()
      })
    }
  }
}
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
